<template>
  <div class="KLive" v-title :data-title="$t('router.KLiveTitle')">
    <el-menu
      :default-active="onRoutes"
      class="el-menu-demo"
      mode="horizontal"
      text-color="#000"
      active-text-color="#A1322C"
      @select="handleSelect"
      router
    >
      <template v-for="item in navData">
        <el-menu-item :index="item.liveTypeId" :key="item.liveTypeId">
          <span v-text="item.name"></span>
        </el-menu-item>
      </template>
    </el-menu>
    <div id="banner-box">
      <div class="k_logo">
        <div class="k_logopic">
          <el-image
            :src="require('@/assets/images/wyn_logo1.png')"
            fit="fill"
          ></el-image>
        </div>
        <div class="k_logoword">
          <p v-html="$t('main.enjoyMusical')"></p>
        </div>
      </div>
      <!-- :autoplay="false" -->
      <el-carousel
        class="banner"
        :interval="6000"
        height="340px"
        indicator-position="none"
        :arrow="list.source && list.source.length > 1 ? 'hover' : 'never'"
      >
        <el-carousel-item v-for="item in list.source" :key="item.id">
          <div class="banner-box">
            <el-image :src="item.bannerImage" fit="fill"></el-image>
            <div class="action">
              <button
                class="play flex-center"
                :title="$t('public.play')"
                @click="toDetail(item.id)"
              >
                <svg-icon name="play" class="icon icon-video-play"></svg-icon>
              </button>
              <!-- <button
                class="play flex-center"
                :title="$t('public.play')"
                v-else
              >
                <svg-icon
                  name="video-play"
                  class="icon icon-video-play"
                  @click="toLive(item.id)"
                ></svg-icon>
              </button> -->
            </div>
            <div class="banner-info">
              <span v-text="item.startPlayTime"></span>
              &nbsp;
              <span
                v-text="
                  item.liveStatus == 0
                    ? $t('main.readyStart')
                    : item.liveStatus == 1
                    ? $t('main.liveStreaming')
                    : item.liveStatus == 2
                    ? $t('main.replaying')
                    : item.liveStatus == 3
                    ? $t('main.ended')
                    : ''
                "
              ></span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      navData: [], //导航栏数据
      list: {}, //节目列表
    };
  },
  components: {},
  computed: {
    onRoutes() {
      // this.$nextTick(() => {
      //   if (this.navData.length >0) {
      //     let currentNav = this.navData.filter(e => e.id === this.$route.params.id);
      //     console.log(currentNav)
      //     document.getElementsByClassName("banner-box").style.backgroundImage = `url(${currentNav.backImgUrl})`
      //   }
      // })
      return this.$route.params.id;
    },
    ...mapGetters(["loginStatu"]),
  },
  mounted() {
    this.getLivePlaces();
  },
  methods: {
    ...mapActions([
      // 播放视频移除播放
      "stopPlay",
    ]),
    handleSelect(val) {
      // this.params = {
      //   pageSize: this.utils.isIE() ? 33 : 9,
      //   pageNum: 1,
      //   categoryId: val == "all" ? "" : val,
      // };
      this.isPage = false;
      this.videoList = [];
      this.getLiveBroadcasts(val);
      // this.getVideoList();
    },
    async getLivePlaces() {
      try {
        let res = await this.$api.KLive.getLivePlaces({});
        if (res.code === 1000000) {
          this.navData = res.source;
          this.getLiveBroadcasts(this.onRoutes);
          // this.getVideoList();
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取节目列表并设置背景图
    async getLiveBroadcasts(liveTypeId) {
      try {
        let params = {
          index: 1,
          size: 10,
          liveTypeId: liveTypeId,
        };
        //设置背景
        let currentNav = this.navData.find((e) => e.liveTypeId === liveTypeId);
        document.getElementById("banner-box").style.backgroundImage =
          currentNav.backImgUrl
            ? `url(${currentNav.backImgUrl})`
            : `url(${require("@/assets/images/klive_bg.png")})`;
        let res = await this.$api.KLive.getLiveBroadcasts(params);
        if (res.code === 1000000) {
          this.list = res;
          // this.navData = res.data;
          // this.getVideoList();
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 跳转详情页
    toDetail(id) {
      if (!this.loginStatu) {
        this.$store.commit("SET_DIALOGLOGIN", true);
        return;
      }
      this.stopPlay();
      this.$router.push({
        name: "KLiveDetail",
        params: {
          id:String(id),
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.KLive {
  min-height: 850px;
  .el-menu-demo {
    height: 60px;
  }
  #banner-box {
    width: 100%;
    height: 800px;
    position: absolute;
    left: 0;
    top: calc(60px + 60px + 20px + 5px);
    background-size: 100% 100%;
    // background-image: url(../../assets/images/klive_bg.png);
    > .k_logo {
      width: 1200px;
      margin: auto;
      display: flex;
      align-items: center;
      .k_logopic {
        .el-image {
          width: 360px;
          height: 182px;
          margin-left: 70px;
        }
      }
      .k_logoword {
        line-height: 50px;
        font-size: 34px;
        letter-spacing: 6px;
        color: #fff;
      }
    }
    .banner {
      width: 1380px;
      height: auto;
      margin: auto;
      ::v-deep .el-carousel__arrow {
        width: 60px;
        height: 60px;
        font-size: 34px;
      }
      .el-carousel__item {
        display: flex;
        align-items: center;
        justify-content: center;
        .banner-box {
          position: relative;
          .el-image {
            width: 1148px;
            height: 340px;
            // max-height: ;
            img {
              width: 100%;
              height: 100%;
            }
          }
          &:hover {
            .action {
              display: flex;
            }
          }
          .action {
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background: rgba($color: #000000, $alpha: 0.3);
            .play {
              width: 50px;
              height: 50px;
              margin: auto;
              padding: 0;
              border: none;
              border-radius: 50%;
              color: #fa2800;
              cursor: pointer;
              background: #fff;
              border-color: #fff;
              .icon {
                font-size: 22px;
                margin: 2px 0 0 4px;
              }
            }
          }
          .banner-info {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding: 0 62px;
            font-size: 28px;
            position: absolute;
            bottom: 0;
            color: #fff;
            background: #e2514e;
            opacity: 0.84;
          }
        }
      }
    }
  }
}
</style>
